<template>
  <div class="index">
    <!-- 轮播图区域 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <van-image :src="item.picUrl" />
        </van-swipe-item>
      </van-swipe>
      <!-- 导航栏区域 -->
      <ul>
        <li>
          <van-icon name="like" />
          <p>签到</p>
        </li>
        <li>
          <van-icon name="gift-card-o" />
          <p>礼券</p>
        </li>
        <li @click="$router.push('/list')">
          <van-icon name="discount" />
          <p>砍价</p>
        </li>
        <li>
          <van-icon name="tv-o" />
          <p>专栏</p>
        </li>
      </ul>
    </div>
    <!-- 全民砍价区域 -->
    <div class="discount">
      <div class="dis-head" @click="$router.push('/list')">
        全民砍价<van-icon name="arrow" class="arrow" />
      </div>
      <discount :list="list"></discount>
    </div>
    <!-- 精选专题 -->
    <div class="theam">
      <div class="theam-head">精选专题<van-icon name="arrow" class="arrow" /></div>
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item v-for="item in theamlist" :key="item.id">
          <van-image :src="item.pic"></van-image>
          <p>{{ item.title }}</p>
          <p>{{ item.descript }}</p>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 人气推荐 -->
    <div class="hot">
      <div class="hot-head" @click="$router.push('/hotlist')">人气推荐<van-icon name="arrow" class="arrow" /></div>
      <hotsale :hotlist="hotlist"></hotsale>
    </div>
  </div>
</template>

<script>
import discount from "../home/discount";
import hotsale from '../home/hotsale';
export default {
  data() {
    return {
      bannerList: [],
      list: [],
      theamlist: [],
      hotlist:[],
    };
  },
  created() {},
  mounted() {
    this.getBanner();
    this.getlist();
    this.gettheamlist();
    this.gethotlist();
  },
  methods: {
    //   banner接口
    getBanner() {
      this.$axios.get("https://api.it120.cc/small4/banner/list").then((res) => {
        // console.log(res);
        this.bannerList = res.data;
      });
    },
    //全民砍价数据
    getlist() {
      this.$axios
        .get("https://api.it120.cc/small4/shop/goods/kanjia/list")
        .then((res) => {
          var arr = [];
          for (var i in res.data.goodsMap) {
            arr.push(res.data.goodsMap[i]);
          }
          this.list = arr.splice(-2);
        });
    },
    // 精选专题数据
    gettheamlist() {
      this.$axios.get("https://api.it120.cc/small4/cms/news/list").then((res) => {
        console.log(res);
        this.theamlist = res.data;
      });
    },
    // 人气推荐数据
    gethotlist(){
      this.$axios.get('https://api.it120.cc/small4/shop/goods/list').then((res)=>{
        console.log(res)
        var arr = [];
        for(var i in res.data){
          arr.push(res.data[i]);
        }
        this.hotlist = arr.splice(-4);
      })
    },
  },
  computed: {},
  components: {
    discount,
    hotsale,
  },
};
</script>

<style scoped lang="scss">
.index {
  background: #f0f0f0;
  width: 100%;
  margin-bottom: 50px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  .van-image{
    width: 100%;
    height: 100%;
  }
}
.swiper {
  position: relative;
  width: 100%;
}
ul {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background: #fff;
  padding: 8px 0;
  border-radius: 20% 20% 0 0;
  .van-icon {
    color: red;
    font-size: 30px;
  }
}
// 全民砍价
.discount {
  width: 100%;
  margin-top: 15px;
  background: #fff;
  .dis-head {
    width: 100%;
    line-height: 38px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }
}
.theam {
  width: 100%;
  margin-top: 15px;
  background: #fff;
}
.theam-head {
  width: 100%;
  line-height: 38px;
  text-align: center;
}
.hot {
  width: 100%;
  margin-top: 15px;
  background: #fff;
}
.hot-head {
  width: 100%;
  line-height: 38px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.van-swipe-item {
  padding: 5px;
  p {
    font-size: 10px;
    line-height: 20px;
  }
  p:nth-of-type(2) {
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 30px;
  }
}
.van-image {
  height: 200px;
}
</style>
